<template>
	<view>
		<!-- 轮播图区域 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
			<swiper-item v-for="item in swiperList" :key="item.id">
				<view class="swiper-item">
					<image :src="item.path" @click="imgDetails(item.url)">
					</image>
				</view>
			</swiper-item>
		</swiper>
		<!-- 导航区域 -->
		<view class="nav-list">
			<view class="item-list" v-for="item in navList" :key="item.id" @click="navClickHandler(item)">
				<image :src="item.path"></image>
				<text>{{item.text}}</text>
			</view>
		</view>
		<view>
			<view class="hospital_title">推荐医院</view>
			<view v-for="item in hospital" class="hospital_body">
				<view class="recommend_left">
					<view>
						<image :src="item.path"></image>
					</view>
					<view>{{item.name}}</view>
				</view>
				<view class="right">{{item.introduce}}</view>

			</view>
		</view>
	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMix from '@/mixins/tabbar-badge.js'
	import {
		mapMutations
	} from "vuex"

	export default {
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMix],
		data() {
			return {
				//推荐医院
				hospital: [{
						id: 1,
						name: "暨大附一",
						path: "../../static/image/GDFY.jpeg",
						introduce: "医院地址：广东省广州市黄埔大道西613号联系电话：020-38688888(总机),医院等级：三级甲等,医院类型：综合医院,重点科室：胃肠外科、骨科、泌尿外科、神经外科、妇科、风湿内科、新生儿科、耳鼻喉科、儿科、肿瘤科、眼科、新医针挑科,经营方式：国营医院"
					},
					{
						id: 2,
						name: "广东省中医院",
						path: "../../static/image/gdzyy.png",
						introduce: "(广州中医药大学第二附属医院、广州中医药大学第二临床医学院、广东省中医药科学院、中国中医科学院广东分院)始建于1933年,是我国近代史上最早的中医医院之一,被..."
					}
				],
				//分类数据导航
				navList: [{
						id: 1,
						path: "/static/image/register.png",
						text: "挂号"
					},
					{
						id: 2,
						path: "/static/image/test.png",
						text: "药品"
					},
					{
						id: 3,
						path: "/static/image/advice.png",
						text: "咨询"
					}
				],
				//轮播图数据列表
				swiperList: [{
						id: 1,
						path: "/static/image/medicalHome.png",
						url: "https://cj.sina.com.cn/articles/view/6493864031/18310805f0010102b6"
					},
					{
						id: 2,
						path: "/static/image/swiperHome.jpg",
						url: "https://www.163.com/dy/article/I01REMH80553AVET.html"
					}
				]
			};
		},
		methods: {
			...mapMutations('m_web', ['commitImageUrl']),
			//导航区域跳转方法
			navClickHandler(item) {
				if (item.text == "药品") {
					uni.navigateTo({
						url: "/subpkg/detais/detais"
					})
				} else if (item.text == "挂号") {
					uni.switchTab({
						url: "/pages/register/register"
					})

				} else if (item.text == "咨询") {
					uni.navigateTo({
						url: "/subpkg/advice/advice"
					})
				}
			},
			imgDetails(scope) {
				console.log("test");
				console.log(scope);
				this.commitImageUrl(scope)
				uni.navigateTo({
					url: '../../subpkg/webViewer/webViewer'
				})
				uni.$showMsg("数据请求成功！")

			}
		}
	}
</script>

<style lang="less">
	.hospital_title{
		text-align: center;
		font-weight: 900;
		font-size: 50rpx;
		color: cadetblue;
	}
	.hospital_body{
		border: 1px solid rosybrown;
		justify-content: center;
		display: flex;
		width: 100%;
		padding: 20px;
		margin-top: 20px;
		height: 150px;
		image{
			width:300rpx;
			height: 100px;
		}
		.right{
			 
			 -webkit-box-orient: vertical;
			 -webkit-line-clamp: 5;
			 overflow: hidden;
			   margin-left: 20rpx;
			   height: 100%;
		}
	}
	swiper {
		height: 330rpx;

		.swiper-item,
		image {
			width: 100%;

		}
	}

	.nav-list {
		display: flex;
		justify-content: space-around;
		margin: 15px 0;

		.item-list {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 30rpx;
			}

		}

	}
</style>